<template>
  <div>
    <div class="center-w">
      <div class="head">
        <div class="title"></div>
        <div class="search_container">
          <div class="label">用户名：</div>
          <el-input
            prefix-icon="el-icon-search"
            style="width: 150px;"
            v-model="formData.userName"
            placeholder="用户名"
            clearable
            @input="getList()"
          ></el-input>
          <div class="label">时间：</div>
          <el-date-picker
            v-model="formData.feedbackDate"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 200px;"
            value-format="yyyy-MM-dd"
            @change="getList()"
          >
          </el-date-picker>
          <el-input
            prefix-icon="el-icon-search"
            style="width: 150px;margin-left: 10px;"
            v-model="formData.orderNo"
            placeholder="请输入订单号"
            clearable
            @input="getList()"
          ></el-input>
        </div>
      </div>
      <div style="overflow-y: scroll;height: 100%;">
        <el-table :data="tableData">
          <el-table-column
            show-overflow-tooltip
            align="center"
            prop="id"
            label="ID"
          >
          </el-table-column>
          <el-table-column align="center" prop="img" label="头像">
            <template slot-scope="scope">
              <el-image
                style="width: 40px; height: 40px;"
                :src="scope.row.img"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            align="center"
            label="用户名"
          >
          <template slot-scope="scope">
            <div>{{ scope.row.userName }}</div>
          </template>
         </el-table-column>
          <el-table-column align="center" prop="orderNo" label="订单号"></el-table-column>
          <el-table-column align="center" prop="createTime" label="反馈时间"></el-table-column>
          <el-table-column
            align="center"
            prop="operate"
            label="操作"
            width="220"
          >
            <template slot-scope="scope">
              <el-button
                @click="detailClick(scope.row)"
                size="mini"
                type="primary"
                >查看详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <Pagination
        v-bind:child-msg="pageparm"
        @callFather="callFather"
      ></Pagination>

      <!-- 详情弹框 -->
      <el-dialog title="查看详情" width="40%" :visible.sync="detailVisible">
        <div class="detail_container">
          <div class="detail_item">
            <div class="content">
              <div class="item_title">用户名：</div>
              <div class="item_info">{{ detailData.userName }}</div>
            </div>
          </div>
          <div class="detail_item">
            <div class="content">
              <div class="item_title">订单号：</div>
              <div class="item_info">{{ detailData.orderNo }}</div>
            </div>
          </div>
          <div class="detail_item">
            <div class="content">
              <div class="item_title">反馈时间：</div>
              <div class="item_info">{{ detailData.createTime }}</div>
            </div>
          </div>
          <div class="detail_item">
            <div class="content">
              <div class="item_title">反馈内容：</div>
              <div class="item_info">{{ detailData.content }}</div>
            </div>
          </div>
        </div>
      </el-dialog>

    </div>
  </div>
</template>

<script>
import Pagination from "../../components/Pagination";

import { getFeedbackList,getFeedbackInfo } from "../../api/feedback";
export default {
  components: { Pagination },
  data() {
    return {
      // 表格数据
      tableData: [],
      title: "添加",
      detailVisible: false,
      formData: {
        userName: "",
        feedbackDate:[],
        orderNo:""
      },
      detailData:{
        username:"希卡利",
        orderNo:"PC192023981",
        feedbackTime: "2023-07-27 09:13:33",
        feedbackContent: "等一手，癫誑屠戮和卧龙出山傲视群雄送花砸蛋的绿幕等一手，癫誑屠戮和卧龙出山傲视群雄送花砸蛋的绿幕"
      },
      //分页
      pageparm: {
        pageIndex: 1,
        size: 10,
        total: 1
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 获取列表
    async getList() {
      if(!this.formData.feedbackDate){
        this.formData.feedbackDate = []
      }
      let list = {
        userName: this.formData.userName,
        startTime: this.formData.feedbackDate.length > 0 ? this.formData.feedbackDate[0] : '',
        endTime:this.formData.feedbackDate.length > 0 ? this.formData.feedbackDate[1] : '',
        orderNo:this.formData.orderNo,
        pageIndex: this.pageparm.pageIndex,
        size: this.pageparm.size
      };
      const res = await getFeedbackList(list);
      if (res.code == 200) {
        if (res.data) {
          let { items, totalCount } = res.data;
          this.tableData = items;
          this.pageparm.total = totalCount;
        } else {
          this.tableData = [];
        }
      }
    },

    // 查看详情
    async detailClick(row){
      this.detailVisible = true
      const res = await getFeedbackInfo({id:row.id})
      this.detailData = res.data
    },

    // 查看反馈详情
    // detailClick(row) {
    //   console.log(row);
    //   this.detailVisible2 = true;
    // },

    // 分页插件事件
    callFather(parm) {
      this.pageparm.pageIndex = parm.pageIndex;
      this.pageparm.size = parm.size;
      this.getList();
    }
  }
};
</script>

<style lang="less" scoped>
.center-w {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  height: 85vh;
  padding: 20px;
  border: 1px solid #ccc;
  margin: 20px;
}

.title {
  color: rgba(16, 16, 16, 1);
  font-size: 20px;
  margin-bottom: 10px;
}

.active {
  color: rgb(124, 134, 244) !important;
}

.head {
  display: flex;
  margin-bottom: 20px;
  align-items: center;
  justify-content: space-between;
}
.search_container {
  display: flex;
  align-items: center;
  .label {
    color: rgb(92, 92, 92);
    font-family: 思源黑体;
    font-size: 16px;
    font-weight: 700;
    margin-left: 20px;
    margin-right: 10px;
  }
}
.detail_container {
  width: 90%;
  margin: 0 auto;
  .detail_item {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    .content {
      display: flex;
      width: 100%;
    }
    .item_title {
      width: 20%;
      color: rgb(69, 69, 69);
      font-family: 思源黑体;
      font-size: 16px;
      font-weight: 400;
      text-align: right;
    }
    .item_info {
      width: 80%;
      color: rgb(69, 69, 69);
      font-family: 思源黑体;
      font-size: 16px;
      font-weight: 400;
    }
  }
}
</style>
